<template>
	<view class="loadingBox" v-if="showLoading">
		<view class="loading">
			<view></view>
			<view></view>
			<view></view>
			<view></view>
			<view></view>
		</view>
		<view class="">{{text}}</view>
	</view>

</template>

<script>
	export default {
		props: ['showLoading','text'],
	}
</script>

<style lang="scss" scoped>
	.loadingBox {
		// background: linear-gradient(176.46deg, rgba(240, 203, 176, 0.4) 45.16%, rgba(255, 234, 219, 0) 98.03%);
		background-color: rgba(0,0,0,0.3);
		background-size: 100% 50%;
		background-repeat: no-repeat;
		padding-bottom: 60rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99999;
		width: 100%;
		height: 100vh;
		@include flexs(center, center);
		flex-direction: column;

		&>view {
			font-size: 28rpx;
			line-height: 2;
			color: #FA690A;
			margin-top: 40rpx;
		}
	}

	.loading,
	.loading>view {
		position: relative;
		box-sizing: border-box;
	}

	.loading {
		display: block;
		font-size: 0;
		color: #FFA96A;
	}

	.loading.la-dark {
		color: #FFA96A;
	}

	.loading>view {
		display: inline-block;
		float: none;
		background-color: currentColor;
		border: 0 solid currentColor;
	}

	.loading {
		width: 20px;
		height: 20px;
	}

	.loading>view {
		position: absolute;
		width: 20px;
		height: 20px;
		margin-left: -50px;
		border-radius: 100%;
		animation: ball-running-dots-animate 2s linear infinite;
	}

	.loading>view:nth-child(1) {
		animation-delay: 0s;
	}

	.loading>view:nth-child(2) {
		animation-delay: -0.4s;
	}

	.loading>view:nth-child(3) {
		animation-delay: -0.8s;
	}

	.loading>view:nth-child(4) {
		animation-delay: -1.2s;
	}

	.loading>view:nth-child(5) {
		animation-delay: -1.6s;
	}

	.loading>view:nth-child(6) {
		animation-delay: -2s;
	}

	.loading>view:nth-child(7) {
		animation-delay: -2.4s;
	}

	.loading>view:nth-child(8) {
		animation-delay: -2.8s;
	}

	.loading>view:nth-child(9) {
		animation-delay: -3.2s;
	}

	.loading>view:nth-child(10) {
		animation-delay: -3.6s;
	}

	.loading.la-sm {
		width: 8px;
		height: 8px;
	}

	.loading.la-sm>view {
		width: 8px;
		height: 8px;
		margin-left: -24px;
	}

	.loading.la-2x {
		width: 40px;
		height: 40px;
	}

	.loading.la-2x>view {
		width: 40px;
		height: 40px;
		margin-left: -100px;
	}

	.loading.la-3x {
		width: 60px;
		height: 60px;
	}

	.loading.la-3x>view {
		width: 60px;
		height: 60px;
		margin-left: -150px;
	}

	@keyframes ball-running-dots-animate {

		0%,
		100% {
			width: 100%;
			height: 100%;
			transform: translateY(0) translateX(500%);
		}

		80% {
			transform: translateY(0) translateX(0);
		}

		85% {
			width: 100%;
			height: 100%;
			transform: translateY(-125%) translateX(0);
		}

		90% {
			width: 200%;
			height: 75%;
		}

		95% {
			width: 100%;
			height: 100%;
			transform: translateY(-100%) translateX(500%);
		}
	}
</style>
